<template>
  <div class="header">
    <div class="side_wx_qq">
      <img :src="httpp+publicInfo.ewm" alt="" class="img1" />
      <p>海南建设信息网</p>
      <p>官方微信</p>
      <div class="top_btn" @click="turnToTop">返回顶部</div>
    </div>
    <div class="part1_bg" :style="'background-image:url('+httpp+headerImg+')'">
      <!-- <img src="@assets/img/1_06.jpg" alt="" class="img1" />
      <img src="@assets/img/xiaotu.jpg" alt="" class="img2" /> -->
    </div>
    <div class="nav">
      <div class="nav_body">
        <div class="header_nav_sy">
          <div class="nav_licc_sy" v-for="(item,index) in headerList" :key="item.id" @click.stop="nativeTo(item,index)">
            <div class="first_nav">{{item.title}}</div>
            <div class="children_nav" v-if="item.children && item.children.length > 0">
              <div class="chi_nav"  v-for="(itemChild,indexChild) in item.children" :key="itemChild.id" @click.stop="nativeTo(item,index,indexChild)">
                <div class="second_nav">{{itemChild.title}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  data() {
    return {
      activeIndex: "1",
      headerList: [],
      headerImg:"",
      httpp:"",
      publicInfo:{}
    };
  },
  beforeCreate(){
   
    console.log(this.httpp)
    this.$getApi("/common/config",{}).then(res=>{
      let resData = res.data;
      console.log(resData,"备用公用")
       this.httpp = this.$apiUrl;
      this.headerImg = res.data.weblogo
      this.publicInfo =  res.data;
    })
    this.$getApi("/Common/navlist",{}).then(res=>{
      console.log(res)
      let resData = res.data;
      let home = [{
          id: 0,
          title: "首页",
          children:[]
        }]
        let zhome = [
          {
            id: 10001,
            title: "建设黄页",
            children:[]
          },
          {
            id:10002,
            title: "人才招聘",
            children:[]
          },
          {
            id:10003,
            title: "活动投票",
            children:[]
          },
          //  {
          //   id: 10003,
          //   title: "行业应用",
          //   children:[]
          // },
           {
            id: 10004,
            title: "会员之家",
            children:[]
          },
           {
            id: 10005,
            title: "联系我们",
            children:[]
          },
        ]
      let newDatalist = _.concat(home,resData)
      this.headerList = _.concat(newDatalist,zhome)

    })
  },
  methods: {
    nativeTo(item,key,keyChild){
      // console.log(item,key,keyChild)
       if (key == 0) {
        this.$router.push({ path: "/" });
      }else
      if (key == 1) {
        if(!keyChild){
          keyChild = 0
        }
        this.$router.push({ path: "/about", query: { sel: keyChild} });
      }else
      if(item.id == 10001){
         this.$router.push({ path: "/huangye" });
      }else
      if(item.id == 10002){
         this.$router.push({ path: "/qiuzhi" ,query:{sel:0}});
      }else
      if(item.id == 10003){
        this.$router.push({ path: "/qiuzhi"  ,query:{sel:1}});
        //  this.$router.push({ path: "/yingyong" });
      }else
      if(item.id == 10004){
         this.$router.push({ path: "/login" });
      }else
      if(item.id == 10005){
        this.$router.push({ path: "/phone", query: { sel: 0 } });
      }else{
        if(!keyChild){
          keyChild = 0
        }
        this.$router.push({ path: "/work", query: { key:key , sel: keyChild } });
      }
    },
    turnToTop() {
      var timer = setInterval(function () {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(timer);
        }
      }, 30);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
.header_nav_sy{
  display flex
  justify-content space-between
  .nav_licc_sy{
    flex:1;
    // padding 0 4px;
        height: 44px;
    line-height: 44px;
    color: #fff;
    position:relative;
    cursor pointer
    text-align center
    &:hover{
      .children_nav{
        display block
      }
      // .first_nav{
      //   background-color #409EFF
      // }
      background-color #007ce0
    }
  }
  .children_nav{
    position:absolute;
    left 0
    top 44px
    z-index 99
    display none
    .chi_nav{
      background-color #2172ce
      height: 36px;
      line-height: 36px;
      padding: 0 10px;
      color #fff
      width 180px
      margin-top 1px
      &:hover{
        background-color #007ce0
      }
    }
  }
}
.el-menu--popup {
  padding: 0px 0 0;
}

.el-menu--popup-bottom-start {
  margin-top: 0;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: #007CE0;
  color: #fff;
}

.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title {
  background-color: #007CE0;
  color: #fff;
  margin-top: 2px;
}

.el-menu--horizontal .el-menu .el-menu-item.is-active, .el-menu--horizontal .el-menu .el-menu-item:hover {
  background-color: #2aa8f3;
  color: #fff;
}

.header {
  min-width:1300px;
  .el-menu {
    background-color: #2172ce;
    color: #fff;
  }

  .el-menu.el-menu--horizontal {
    border-bottom: none;
  }

  .el-menu--horizontal>.el-menu-item {
    height: 44px;
    line-height: 44px;
    color: #fff;
    border-bottom: none;

    &.is-active {
      border-bottom: none;
      background-color: #007CE0;
    }
  }

  .el-menu--horizontal>.el-submenu .el-submenu__title {
    height: 44px;
    line-height: 44px;
    color: #fff;

    &:hover {
      color: #fff;
      background-color: #007CE0;
    }
  }

  .nav_body {
    .el-submenu__title i {
      display: none;
    }
  }
}
</style>
<style scoped lang="stylus">
.side_wx_qq {
  position: fixed;
  right: 10px;
  top: 50%;
  margin-top: -100px;
  text-align: center;
  border: 1px solid #f0f0f0;
  background-color: #fff;
  border-radius: 6px;
  z-index:10
  .img1 {
    width: 120px;
  }

  .top_btn {
    background-color: #2172ce;
    color: #fff;
    border-radius: 0 0 6px 6px;
    padding: 4px 0;
    margin-top: 10px;
    cursor: pointer;
  }
}

.header {
  .part1_bg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-repeat:no-repeat;
    background-position:center top;
    background-size: 1920px 156px;
    // background-size:
    height 156px
    .img1 {
      width: 351px;
      height: 65px;
    }

    .img2 {
      width: 541px;
      height: 114px;
    }
  }

  .nav {
    background-color: #2172ce;
    width: 100%;

    .nav_body {
      margin: 0 auto;
      width: 1300px;
      padding: 0 20px;
    }
  }
}
</style>
